﻿@{
    ViewBag.Title = "UploadTPS";
}

<script type="text/javascript" src="../../Scripts/jQuery.FileUpload/jquery.fileupload.js"></script>
@using (Html.BeginForm())
{
<fieldset>
<legend style="width: 480px;">Uploading Of Telephone Number File</legend>
<input type="hidden" name="CallCentreID" value="@(ViewBag.CallCentreID)" />
<div style="left: 30px">
    <div>
        <label>Select File To Upload</label>
        <span style="font-size: 0px;" class="btn btn-success fileinput-button" id="spanupload">
            <i class="glyphicon glyphicon-plus"></i>
            <span>Upload Import File</span>
            <input class="fileupload" id="fileupload" type="file" name="files[]" >
        </span>
    </div>
    <label id="lblfilename"></label>
    <input type="hidden" id="hdnFileName" name="hdnFileName" />
    <div class="progress">
        <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%;">
	        <span class="sr-only">0% Complete</span>
        </div>
    </div>    
    <input type="submit" value="Process" id="processbutton" />
</div>

</fieldset>
}
<div class="spacer"></div>
<span id="checkingmessage">
<label style="font-family: 'Trebuchet MS'; font-size: large; font-style: italic; color: #800000">Checking TPS numbers...</label>
</span>

<script type="text/javascript">

    $('#checkingmessage').toggle();

    $('.fileupload').fileupload({
        dataType: 'json',
        url: '/CallCentres/UploadFile',
        autoUpload: true,
        done: function (e, data) {
            $('#lblfilename').text("File Uploaded : " + data.result.name);
            $('#hdnFileName').val(data.result.name);
        }
    }).on('fileuploadprogressall', function (e, data) {
        var progress = parseInt(data.loaded / data.total * 100, 10);
        $('.progress .progress-bar').css('width', progress + '%');
    });

    $("#buttonProcess").click(function () {
        $(this).val("Processing....Please Wait");
        return true;
    });

    $("form").submit(function () {
        $('#checkingmessage').toggle();
        return true;
    });

</script>